<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<meta name="author" content="Auelnce,aulence@foxmail.com">
	<title>Vue的class和style绑定</title>
	<link rel="shortcut icon" href="../img/favicon.ico">
	<link rel="bookmark" href="../img/favicon.ico">
	<link rel="stylesheet" href="../plugin/bootstrap.min.css">
	<link rel="stylesheet" href="../css/common.css">
	<link rel="stylesheet" href="../css/classAndStyle.css">
</head>
<body>
	<header>
		<nav>
			<ul class="breadcrumb">
				<li><a href="../index.html">首页</a></li>
				<li class="active">Vue的class和style绑定</li>
			</ul>
		</nav>
	</header>

	<main>
		<article>
			<h1>Vue的class和style绑定</h1>

			<section id="app-1">
				<h2 class="section_h2">#app-1：根据数据的布尔值添加class</h2>
				<p :class="{
					'text-red':statusTrue,
					'fz-34':statusTrue,
					'text-underline':statusTrue
				}">红色的34像素字体，带下划线的段落</p>
				<p :class="{
					'text-red':statusTrue,
					'fz-34':statusFalse,
					'text-underline':statusFalse
				}">红色字体的段落</p>
				<p :class="{
					'text-red':statusFalse,
					'fz-34':statusFalse,
					'text-underline':statusFalse
				}">使用默认样式的段落</p>
			</section>

			<section id="app-2">
				<h2 class="section_h2">#app-2：通过视图模型里的数据对象添加class</h2>
				<p :class="styleObject">本段落的class是通过数据定义的，所以不需要花括号</p>
				<p>这样就可以修改“app2.styleObject["fz-26"]”等“class”（其实是属性）的布尔值来动态添加/移除class了</p>
				<p>在控制台中输入“app2.styleObject["text-blue"] = false”观察效果</p>
			</section>

			<section id="app-3">
				<h2 class="section_h2">#app-3：通过切换class绑定的布尔值添加/移除样式</h2>
				<div class="hobbyList">
					<ul>
						<template v-for="(hobby, index) in hobbyList">
							<li :class="{active:hobby.activeStatus}" @click="toggleClass(index)">{{hobby.buttonName}}</li>
						</template>
					</ul>
					<!-- 根据是否选中至少一个来显示不同的结果 -->
					<div class="mt-10 ">
						<template v-if="ckdHobby.length">
							您选中了：
							<span v-for="ckdItem in ckdHobby">
								{{ckdItem}}
							</span>
						</template>
						<template v-else>
							难道您连一个爱好都没有吗？
						</template>
					</div>
					
				</div>
			</section>

			<section id="app-4">
				<h2 class="section_h2">#app-4：通过计算属性设置class</h2>
				<div :class="successClass">{{stateText.success}}</div>
				<div :class="failClass">{{stateText.fail}}</div>

				<tips class="comment">有时我们需要根据现有的条件（主要是数据模型，即数据源）来判断当前元素的显示状态，可以像这样，通过条件设置的方式来启用或禁用指定的样式类</tips>
			</section>

			<section id="app-5">
				<h2 class="section_h2">#app-5：通过点击事件切换状态</h2>
				<div :class="setFont" v-if="operate" @click="changeState">{{danger}}</div>
				<div :class="setFont" v-else @click="changeState">{{security}}</div>

				<tips class="comment">在有些需要切换组件/控件显示状态的场景，可以使用这样的方式。这样的场景有：密码的明文切换、同样位置操作按钮的切换显示、开关功能（可能联动一系列的功能）、登录方式切换等</tips>
			 </section>

			<section id="app-6">
				<h2 class="section_h2">#app-6：通过数组设置class</h2>
				<div :class="[red,fz,fs]">样式组合一</div>
				<div :class="[fz,fs]">样式组合二</div>
				<div :class="[red]">样式组合三</div>

				<h3 class="section_h3">通过数组内的三元表达式添加class：</h3>
				<div :class="[ 5 === 5 ? red : '' ,fz]">使用红色的22像素字体（全部执行）</div>
				<div :class="[ 5 !== 5 ? red : '' ,fz]">使用红色的22像素字体（只执行字体大小）</div>

				<h3 class="section_h3">通过数组+对象添加class：</h3>
				<div :class="[{'text-blue': yes}, fs]">使用蓝色的斜体字体（全部执行）</div>
				<div :class="[{'text-blue': no}, fs]">使用蓝色的斜体字体（只执行斜体）</div>

				<tips class="comment">通过这样的方式使得样式的可控性更强，可以根据实现意图来对数据进行操作或判断，从而实现丰富的样式变换</tips>
			</section>

			<section id="app-7">
				<h2 class="section_h2">#app-7：在组件上设置class</h2>
				<test-class class="text-underline" :prop="prop1"></test-class>
				<test-class class="fs-italic" :prop="prop2"></test-class>
				<test-class class="text-fail" :prop="prop3"></test-class>

				<tips class="comment">最终会将设置在子组件上的样式类和父组件上的样式拼接在一起，如果出现具体样式属性的冲突，会按照原样式表内的权重优先级进行覆盖</tips>
			</section>

			<section id="app-8">
				<h2 class="section_h2">#app-8：动态的style行内样式</h2>
				<div :style="{fontSize: '16px', color: '#ff6666'}">
					画船捶鼓催君去，高楼把酒留君住。
				</div>
				<div :style="{fontSize: fontArr[0], color: colorArr[0]}">
					去住若为情，西江潮欲平。
				</div>
				<div :style="{fontSize: fontArr[1], color: colorArr[1]}">
					江潮容易得，只是人南北。
				</div>
				<div :style="{'font-size': fontArr[2], color: colorArr[2]}">
					今日此樽空，知君何日同！
				</div>

				<tips class="comment">可以用一个对象来控制元素的行内样式，其对象的CSS属性名需使用驼峰式命名（camelCase），若用连线式命名（kebab-case）则需要用引号括起来，如上例中的最后一个“font-size”的格式。
					<p>CSS的属性值则是这个对象的属性值，它的值需要为一个字符串的格式。既可以是字面量的，也可以是变量的形式。</p>
				</tips>
			</section>

			<section id="app-9">
				<h2 class="section_h2">#app-9：将对象的名称作为style的值</h2>
				<div :style="firstStyle">
					夜饮东坡醒复醉，归来仿佛三更。家童鼻息已雷鸣。敲门都不应，倚杖听江声。
				</div>
				<div :style="lastStyle">
					长恨此身非我有，何时忘却营营。夜阑风静縠纹平。小舟从此逝，江海寄余生。
				</div>

				<tips class="comment">如果需要让视图更加的简洁清晰，可以将这个动态style的值抽离为一个拥有名称的对象。
					<p>长期以来，各种规范都不建议在HTML标签上书写style行内样式。原因是这样会让标签的属性看起来很“脏乱”，而且传统的行内样式不具备可复用性，后期修改不同标签上的相同样式属性工作量会很大。但是如果将行内样式像Vue这样作为一个变量，那以上问题都得到了克服，因为这样的样式书写形式同时具备可复用性和可维护性。</p>
				</p>
				</tips>
			</section>

			<section id="app-10">
				<h2 class="section_h2">#app-10：将对象数组为style的值</h2>
				<div :style="[style1,style2,style3]">
					桃李春风一杯酒，江湖夜雨十年灯。
				</div>
				或者：
				<div :style="allStyle">
					仰天大笑出门去，我辈岂是蓬蒿人！
				</div>

				<tips class="comment">最后我们可以可以使用多个样式对象组成的数组来组合出我们需要的样式结果，或使用“计算属性”来组合出我们所需的样式，这样在视图上会更为简洁。</p>
				</p>
				</tips>
			</section>
		</article>
	</main>

	<script src="../plugin/vue.js"></script>
	<script src="../js/classAndStyle.js"></script>
</body>
</html>